import React, { useState, useEffect } from 'react'
import { connect } from 'dva'
import { Input, Button, Modal, DatePicker } from 'antd'
import moment from 'moment'
import './index.styl'

const { TextArea } = Input


function ReformModel ({ eformModelConent }) {
    const [visible, changeState]=useState(false)
    const [len, setLen] = useState(0);
    const [text, setText] = useState('');
    const [endTime, setEndTime] = useState('');
    // 错误提示
    const [erroType, setErrorType] = useState('');
    const [dateErro, setDateErro] = useState('');
    // 是否点击取消
    const [isCancel, setCancel] = useState(false);
    // 初始化数据
    useEffect(()=>{
        if (visible) {
            setErrorType('')
            setDateErro('')
            setText('')
            setLen(0);
            setCancel(false)
            setEndTime('')
        }
    },[visible])

    // 提交整改
    const handleSubmit = (e) => {
        if (e.target.value.length === 0) {
            setText()
            setLen(0)
            setErrorType('请输入投诉原因！')
        }
        if (e.target.value) {
            const valueLength = e.target.value.length
            if (valueLength.length === 0) {
                setText()
            }
            if (valueLength <= 30) {
                setLen(valueLength);
                if (e.target.value) {
                    setText(e.target.value.trim())
                }
                setErrorType('')
            } else {
                setText(e.target.value.slice(0,30))
                setLen(30)
                setErrorType('最多只能输入30字')
            }
        }
    }

    // 失去焦点验证
    const handeOnblur = (e) => {
        setTimeout(() => {
            if (!isCancel && !text) {
                setErrorType('请输入整改原因')
            }
        },200)
    }

    let ad = 0
    let dd = ''
    const handeOnblur2 = (e) => {
        ad += 1
        setTimeout(() => {
            if (!isCancel && !endTime && ad !== 1 && !dd) {
                setDateErro('请选择整改截止时间')
            }
        },500)
    }

    // 提交数据
    const submit = () => {
        if (text && endTime) {
            eformModelConent(text, endTime)
            changeState(false)
            return
        }
        if (!text) {
            setErrorType('请输入整改原因')
        }
        if (!endTime) {
            setDateErro('请选择整改截止时间')
        }
    }

    // 取消
    const cancelBtn = () => {
        setCancel(true)
        changeState(false)
    }

    // 当天日期之前的不可选
    function disabledDate(current) {
        return current && current < moment().subtract(1,'day');
    }

    const selectDate = (ment, str) => {
        dd = str
        setEndTime(str)
        setDateErro('')
    }

    return (
        <div className='reformModel'>
            <Button
            className='white-button btnWidth'
            onClick={() => changeState(true)}
            style={{ background: '#E6A23C' , color: '#fff'}}
            >整改</Button>
            <div>
                <Modal
                width={'5rem'}
                visible={visible}
                footer={null}
                closable={false}
                bodyStyle={{ padding: 0 }}
                maskClosable={false}
                mask={false}
                >
                    <div className='reformModel' >
                        <div className='headTitle'>
                            <span className='titleText'>维修整改</span>
                            <span onClick={() => changeState(false)} className='cancelBtn' style={{cursor: 'pointer'}}>X</span>
                        </div>
                        <div className='bodyConten'>
                            
                            <div className="flex">
                                <TextArea  
                                placeholder="请输入整改原因" 
                                className='textarea'
                                style={{width: '4.5rem'}} 
                                onBlur ={handeOnblur}
                                onChange={handleSubmit}
                                value={text}
                                />
                                <div className='errMsg'>
                                    <span style={{color: '#f40'}}>{erroType ? erroType : ''}</span>
                                    <span>{len}/30</span>
                                </div>
                            </div>

                            <div className='dateBox'>
                                整改截止日期：
                                <DatePicker 
                                className="self-date" 
                                showToday={false} 
                                placeholder="请选择开始日期"
                                disabledDate={disabledDate}
                                onChange={selectDate}
                                onBlur={handeOnblur2}
                                allowClear={false}
                                value={ endTime ? moment(new Date(endTime)) : ''}
                                />
                                <div className='errMsg' style={{color: '#f40'}}>{dateErro ? dateErro : ''}</div>
                            </div>
                            
                            <div className='btnsBox'>
                                <Button 
                                className="white-button cancleBtn btnWidth" 
                                htmlType="reset" 
                                onClick={cancelBtn}
                                id='cancel'
                                >取消</Button>
                                <Button className="blue-button okBtn btnWidth" onClick={submit}>确定</Button>
                            </div>
                        </div>
                    </div>
                </Modal>
            </div>
        </div>
    )
}


export default connect(({ deviceRepair }) => ({
    deviceRepair
  }))(ReformModel)